<template>
  <view class="bind-phone">
    <view class="example">
      <!-- 基础表单校验 -->
      <el-form ref="form" :rules="rules" :model="form" label-position="top">
        <el-form-item label="手机号:" prop="phone" required>
          <el-input v-model="form.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="验证码:" prop="code" required>
          <el-input v-model="form.code" placeholder="请输入验证码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit('form')" style="width: 100%;">提交</el-button>
        </el-form-item>
      </el-form>
    </view>
  </view>
</template>

<script>
import { bindPhone } from '@/api/user.js';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      form: {
        phone: '',
        code: '',
        password: '',
      },
      rules: {
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          { pattern: /^\d{4}$/, message: '验证码只能输入4位数字', trigger: 'blur' }
        ]
      },
    };
  },
  onLoad(options) {

  },
  methods: {
    // 是否来自“我的”页面
    isFromMyPage() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        const currentPage = pages[pages.length - 1];
        const fromPage = pages[pages.length - 2];

        if (fromPage.route === 'pages/user/index') {
          return true;
        } else {
          return false;
        }
      }
    },
    submit(ref) {
      this.$refs[ref].validate().then(() => {
        let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
        this.form._id = userInfo._id;
        bindPhone(this.form).then(res => {
          uni.showToast({
            title: res.msg,
            icon: "none"
          });
          // 兵丁手机号可以观看无限次
          uni.setStorageSync('infinite', true);
          // 如果不是从'我的'页面过来，即从其他页面过来的，跳转回去要关闭MyUseOut弹框
          if (!this.isFromMyPage()) {
            uni.$emit('closeModal', false);
          }
          setTimeout(() => {
            uni.navigateBack();
          }, 500);
        }).catch(err => {
          console.log('err', err);
        });
      }).catch(err => {
        console.log('err', err);
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.bind-phone {
  padding: 20rpx;
}

.title {
  font-size: 34rpx;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.star {
  color: red;
  margin-right: 5rpx;
}

.btn {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}

.tui-line-cell {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.tui-title {
  line-height: 32rpx;
  min-width: 120rpx;
  flex-shrink: 0;
}

.tui-input {
  font-size: 32rpx;
  color: #333;
  padding-left: 20rpx;
  flex: 1;
  overflow: visible;
}

.tui-btn-box {
  padding: 40rpx 30rpx;
  box-sizing: border-box;
}

.tui-button-gray {
  margin-top: 30rpx;
}
</style>